<template>
	<layout>
		<view class="index_box">
			<!-- 公告 -->
			<view class="gonggao">
				<u-notice-bar icon="" :text="text1" fontSize="40"></u-notice-bar>
			</view>
			<!-- 内容区域 -->
			<view style="margin-top: 20px;">
				<view class="container">
					<!-- 报名人数框 -->
					<view class="box">
						<view class="label">参与人数</view>
						<view class="value">483人</view>
					</view>

					<!-- 访问量框 -->
					<view class="box">
						<view class="label">访问量</view>
						<view class="value">12万次</view>
					</view>

					<!-- 累计人数框 -->
					<view class="box">
						<view class="label">累计人数</view>
						<view class="value">3.2万</view>
					</view>
				</view>
				<!-- 嘉宾拜年视频集锦 -->
				<!-- <view class="center-container">
					<video class="center_video"
						src="http://video.cctvwenhua.tv/sv/384c2bcb-187eb5708d8/384c2bcb-187eb5708d8.mp4" controls
						mode="widthFix"
						poster="http://www.cctvwenhua.tv/wp-content/uploads/2023/02/2023大拜年直播宣传片.jpg"></video>
				</view> -->
				<!-- 一排三列 -->
				<view class="content">
					<view class="u-page">
						<view class="u-demo-block">
							<view class="u-demo-block__content">
								<view class="album-container">
									<view class="album" v-for="item,index in players" :key="index">
										<!-- 头象 -->
										<!-- <u-avatar class="album__avatar" :text="item.nickName.substring(0,1)" fontSize="40"
											randomBgColor></u-avatar> -->

										<view class="album__content">
											<u-text :text="item.nickName" type="primary" bold size="35"
												class="text"></u-text>

											<video :id="'myVideo'+index" class="vote-video" :src="item.vUrl" controls
												mode="widthFix" :poster="item.vCover"
												@click="makeFullScreen(index)"></video>
											<!-- <p>{{ item.vDesc }}</p> -->
											<!-- <p> asd kljasd asdasdasdwadasasd kljasd asdasdasdwadasasd kljasd asdasdasdwadasasd kljasd asdasdasdwadasasd kljasd asdasdasdwadas </p> -->
											<!-- 查看详细区别在于多了评论 去掉了已经 -->
											<!-- <view class="footer-bnt">
												<button @click="catVideo(item)" size="mini">查看</button>
											</view> -->
											<!-- 其他的 -->


										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>

		</view>
	</layout>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import uniCard from '@/components/uni-card/uni-card.vue'
	import layout from '@/components/layout/index.vue'
	import api from '@/util/api.js'
	import vote from "@/util/vote.js"

	export default {
		data() {
			return {
				title: '文化大拜年',
				// 公告内容
				text1: '双击视频即可全屏观看呦!',
				players: [{
						nickName: '何占豪',
						vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/01/41-何占豪.jpg',
						vUrl: 'http://www.cctvwenhua.tv/video/2023bainian/41%20%E4%BD%95%E5%8D%A0%E8%B1%AA%E4%B8%A8%E8%91%97%E5%90%8D%E4%BD%9C%E6%9B%B2%E5%AE%B6%20%E4%B8%AD%E5%9B%BD%E7%AC%AC%E4%B8%80%E9%83%A8%E5%B0%8F%E6%8F%90%E7%90%B4%E5%8D%8F%E5%A5%8F%E6%9B%B2%E3%80%8A%E6%A2%81%E7%A5%9D%E3%80%8B%E4%B8%BB%E5%88%9B%EF%BC%9A%E7%A5%9D%E7%A6%8F%E5%A4%A7%E5%AE%B6%E5%9C%A8%E6%96%B0%E7%9A%84%E4%B8%80%E5%B9%B4%E9%87%8C%E9%98%96%E5%AE%B6%E5%B9%B8%E7%A6%8F%20%E6%8A%8A%E4%BC%98%E7%A7%80%E9%9F%B3%E4%B9%90%E4%BD%9C%E5%93%81%E4%BC%A0%E6%92%AD%E5%88%B0%E6%B5%B7%E5%A4%96.mp4'
					},
					{
						nickName: '裘芸',
						vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/01/49-裘芸丨京剧名家裘派花脸创始人裘盛戎之女：祝福千家万户幸福美满-欢欢喜喜过大年.jpg',
						vUrl: 'http://www.cctvwenhua.tv/video/2023bainian/49%20%E8%A3%98%E8%8A%B8%E4%B8%A8%E4%BA%AC%E5%89%A7%E5%90%8D%E5%AE%B6%E8%A3%98%E6%B4%BE%E8%8A%B1%E8%84%B8%E5%88%9B%E5%A7%8B%E4%BA%BA%E8%A3%98%E7%9B%9B%E6%88%8E%E4%B9%8B%E5%A5%B3%EF%BC%9A%E7%A5%9D%E7%A6%8F%E5%8D%83%E5%AE%B6%E4%B8%87%E6%88%B7%E5%B9%B8%E7%A6%8F%E7%BE%8E%E6%BB%A1%20%E6%AC%A2%E6%AC%A2%E5%96%9C%E5%96%9C%E8%BF%87%E5%A4%A7%E5%B9%B4.mp4'
					},
					{
						nickName: '房飞',
						vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/01/29-房飞.jpg',
						vUrl: 'http://www.cctvwenhua.tv/video/2023bainian/29%20%E6%88%BF%E9%A3%9E%E4%B8%A8%E7%BE%8E%E5%9B%BD%E4%BA%9A%E6%96%87%E4%BA%A4%E5%93%8D%E4%B9%90%E5%9B%A2%E8%89%BA%E6%9C%AF%E6%80%BB%E7%9B%91%20%E6%8C%87%E6%8C%A5%E5%AE%B6%EF%BC%9A%E7%A5%9D%E7%A6%8F%E5%A4%A7%E5%AE%B6%E6%96%B0%E5%B9%B4%E5%BF%AB%E4%B9%90%20%E5%85%94%E5%B9%B4%E5%A4%A7%E5%90%89%EF%BC%81.mp4'
					},
					{
						nickName: '胡文阁',
						vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/01/36-胡文阁.jpg',
						vUrl: 'http://www.cctvwenhua.tv/video/2023bainian/36%20%E8%83%A1%E6%96%87%E9%98%81%E4%B8%A8%E8%91%97%E5%90%8D%E4%BA%AC%E5%89%A7%E8%A1%A8%E6%BC%94%E8%89%BA%E6%9C%AF%E5%AE%B6%20%E6%A2%85%E6%B4%BE%E4%BC%A0%E4%BA%BA%EF%BC%9A%E7%A5%9D%E7%A6%8F%E5%A4%A7%E5%AE%B6%E6%96%B0%E6%98%A5%E5%BF%AB%E4%B9%90%20%E9%98%96%E5%AE%B6%E5%B9%B8%E7%A6%8F%EF%BC%81.mp4'
					},
					{
						nickName: '赵炎',
						vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/01/35-赵炎.jpg',
						vUrl: 'http://www.cctvwenhua.tv/video/2023bainian/35%20%E8%B5%B5%E7%82%8E%E4%B8%A8%E8%91%97%E5%90%8D%E7%9B%B8%E5%A3%B0%E8%A1%A8%E6%BC%94%E8%89%BA%E6%9C%AF%E5%AE%B6%EF%BC%9A%E7%A5%9D%E5%A4%A7%E5%AE%B6%E6%96%B0%E6%98%A5%E5%BF%AB%E4%B9%90%20%E7%A6%8F%E5%AF%BF%E5%BA%B7%E5%AE%81%EF%BC%81.mp4'
					},
					{
						nickName: '潮白之合..',
						vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/01/13-潮白之声合唱团.jpg',
						vUrl: 'http://www.cctvwenhua.tv/video/2023bainian/13%20%E6%BD%AE%E7%99%BD%E4%B9%8B%E5%A3%B0%E5%90%88%E5%94%B1%E5%9B%A2%EF%BC%9A%E7%A5%9D%E5%85%A8%E7%90%83%E5%8D%8E%E4%BA%BA%E6%96%B0%E5%B9%B4%E5%BF%AB%E4%B9%90%20%E5%85%94%E5%B9%B4%E5%90%89%E7%A5%A5%E5%A6%82%E6%84%8F%EF%BC%81.mp4'
					},
					{
						nickName: '彭俊豪',
						vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2024/01/1706178493596.jpg',
						vUrl: 'http://www.cctvwenhua.tv/wp-content/uploads/2018/02/王昌娥-1.mp4?_=2'
					},
					{
						nickName: '宋澎',
						vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/01/12-宋澎.jpg',
						vUrl: 'http://www.cctvwenhua.tv/video/2023bainian/12%20%E5%AE%8B%E6%BE%8E%E4%B8%A8%E5%9B%BD%E5%AE%B6%E5%8F%91%E6%94%B9%E5%A7%94%E5%9B%BD%E9%99%85%E5%90%88%E4%BD%9C%E4%B8%AD%E5%BF%83%E5%8E%9F%E5%A4%A7%E5%81%A5%E5%BA%B7%E7%A0%94%E7%A9%B6%E9%99%A2%E5%89%AF%E9%99%A2%E9%95%BF%EF%BC%9A%E7%A5%9D%E6%84%BF%E4%BC%9F%E5%A4%A7%E7%A5%96%E5%9B%BD%E7%B9%81%E8%8D%A3%E5%AF%8C%E5%BC%BA.mp4'
					},
					{
						nickName: '亚文交响乐团',
						vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/01/24-中国文化视窗北美台亚文交响乐团.jpg',
						vUrl: 'http://www.cctvwenhua.tv/video/2023bainian/24%20%E4%B8%AD%E5%9B%BD%E6%96%87%E5%8C%96%E8%A7%86%E7%AA%97%E5%8C%97%E7%BE%8E%E5%8F%B0&%E4%BA%9A%E6%96%87%E4%BA%A4%E5%93%8D%E4%B9%90%E5%9B%A2%E6%90%BA%E6%89%8B%E6%B5%B7%E5%A4%96%E8%89%BA%E6%9C%AF%E5%AE%B6%E5%90%91%E5%85%A8%E7%90%83%E5%8D%8E%E4%BA%BA%E5%8D%8E%E4%BE%A8%E6%8B%9C%E5%B9%B4.mp4'
					},
				],
				/* players_left: [],
				players_right: [], */
				videos: [{
					url: 'http://video.cctvwenhua.tv/sv/384c2bcb-187eb5708d8/384c2bcb-187eb5708d8.mp4',
					// title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					vCover: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/02/2023大拜年直播宣传片.jpg'
				}],
			}
		},
		onLoad() {
			const {
				setNavigationBarTitle,
			} = this

			setNavigationBarTitle()

			// 初始化获取信息
			this.getWebInit();
		},
		components: {
			uniCard,
			layout,
		},
		methods: {
			...mapActions(['setNavigationBarTitle']),
			// 初始化数据
			getWebInit() {
				// 加载轮播图
				api.get('/web/init').then(res => {
					// 保存
					uni.setStorageSync('webInit', res.data);
					console.log(res.data)
					// 所有作品
					// this.players = res.data.vote
				})

			},
			// 放大视频播放
			makeFullScreen(index) {
				console.log(index);
				// 获取视频元素
				const videoElement = uni.createVideoContext('myVideo' + index, this);

				// 调用全屏方法
				videoElement.requestFullScreen({
					direction: 0
				});
			},
			// 查看单个视频
			catVideo(item) {
				// 跳转页面带参数
				uni.navigateTo({
					url: '/pages/rankingList/videoInfo/videoInfo?nickName=' + item.nickName + '&vCover=' + item
						.vCover +
						'&vDesc=' + item.vDesc + '&vUrl' + item.vUrl + '&page=indexPage'
				})
			}


		}
	}
</script>

<style scoped lang="scss">
	// 视频的样式
	.center-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30vh;
	}

	.center_video {
		width: 100%;
		max-width: 800px;
		/* 设置最大宽度，根据实际情况调整 */
		border-radius: 10px;
		outline: none;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	// 上面的3排
	.container {
		display: flex;
		justify-content: space-around;
		padding: 20px;
		/* 调整内边距 */
	}

	// 三个框
	.box {
		text-align: center;
		padding: 10px;
		border: 1px solid #c3c3c3;
		/* 添加阴影效果 */
		box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2);
		background-color: #FFF;


		border-radius: 8px;
	}

	.label {
		font-size: 14px;
		color: #666;
	}

	.value {
		font-size: 18px;
		color: #333;
		font-weight: bold;
	}

	// 首页样式
	.index_box {
		// background-color: #00ff00;
		// height: 100%;
		position: relative;
		top: -2.5vh;
		/* 背景图 */
		// background: url("@/static/images/banner/banner_baoming.jpg");
		/* or repeat-y */
		background-repeat: repeat;
		margin-bottom: 15vh;
	}

	// 查看按钮
	.footer-bnt {
		button {
			background-color: #ff9b23;
			/* 设置按钮背景颜色为橙色 */
			position: relative;
			left: 3vh;
		}
	}

	.vote-video {
		width: 15vh;
		height: 15vh;
		position: relative;
		left: 12rpx;
		// 封面铺满
		object-fit: cover;

	}

	//  单个视频的东西
	.album {
		width: calc(33.33% - 10px);
		/* 设置每列的宽度 */
		margin-right: 10px;
		/* 设置列之间的间距 */
		margin-bottom: 10px;
		/* 设置行之间的间距 */
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

		/* 离远点 */
		margin-bottom: 2vh;

		/* 添加阴影效果 */
		// 内容中的昵称
		.album__content {
			.text {
				position: relative;
				left: 5%;
			}

		}
	}

	.album-container {
		display: flex;
		flex-wrap: wrap;

	}

	/* 页面的 <style> 部分或全局样式文件 */
	.enlarge-icon {
		font-size: 24px;
		/* 或者任何你希望的大小 */
	}
</style>